<template>
    <div class="pageCon">


        <van-pull-refresh v-model="isLoading" @refresh="resHandle">

            <div class="topInfoBox" v-if="user.userType == 1">
                <div>
                    <img :src="user.userImg" alt="">
                    <div>
                        hi,<span>{{ user.userName }}</span>
                    </div>
                </div>
                <div class="doctInfoBox">
                    <div>
                        {{ yiZhu.userName || '暂无' }}
                        <span>我的助理</span>
                    </div>
                    <div @click="toPage('/myPatient')">
                        {{ patientNum || 0 }}
                        <span>我的患者</span>
                    </div>
                </div>
                <div @click="toPage('/noticeList')" class="noticeBox">
                    <img src="../../assets/index/kefu.png">
                    公告
                </div>
            </div>



            <template v-if="user.userType == 0">
                <div class="topCon">
                    <div>
                        <span>hello,</span>
                        <span>{{ user.userName == null ? '暂未设置' : user.userName }}</span>
                    </div>
                    <div>
                        <div @click="toPage('/noticeList')">
                            <img src="../../assets/index/kefu.png">
                            公告
                        </div>

                        <!-- <div>
                            <img src="../../assets/index/kefu.png">
                            客服
                        </div> -->
                    </div>
                </div>
                <div class="recordBox" @click="toDetail(1, myDoctor)">
                    <img src="../../assets/index/recordBtn.png">
                    <div class="myDoctor">
                        <span>我的医生</span>
                        <span>
                            绑定医生：{{ myDoctorName || '暂未绑定' }}</span>
                    </div>
                </div>
                <div class="messageBox" v-if="notice" @click="toPage('/noticeList')">
                    <img src="../../assets/index/tips.png" alt="">
                    <div>
                        <van-notice-bar color="#333" :text="notice.noticeContent" />
                    </div>
                    <div>立即查看</div>
                </div>

                <div class="navBox">
                    <div @click="toPage('/scoreList')">
                        <span>积分商城</span>
                        <span>签到领积分</span>
                        <span>免费义诊</span>
                    </div>
                    <div @click="toPage('/myFamily')">
                        <span>邀请家人</span>
                        <span>绑定成员</span>
                        <span>权益共享</span>
                    </div>
                </div>
            </template>

            <!-- 名医信息 -->
            <div class="doctorCon" v-if="doctorList.length != 0">
                <div class="doctorTitle">
                    <span>名医信息</span>
                    <div @click="toDetail(4, doctorList)">更多
                        <van-icon name="arrow" />
                    </div>
                </div>
                <div class="doctorList">
                    <div class="doctorInfo" v-for="(item, index) in doctorList" :key="index" @click="toDetail(1, item)">
                        <div class="leftInfo">
                            <span>{{ item.doctorName || '名字' }}</span>
                            <span>{{ item.doctorTitle || '暂未设置' }}</span>
                            <span>{{ item.doctorDetail || '经验丰富' }}</span>
                            <img src="../../assets/index/point.png">
                        </div>
                        <img class="hospitalImg" src="../../assets/index/hospital.png">
                        <img :src="item.doctorPic" class="doctorImg">
                    </div>
                </div>
            </div>


            <div class="videoCon">
                <div class="videoTitle">
                    <div :class="navFlag == 1 ? 'active' : ''" @click="navFlag = 1"> 精选视频
                        <div class="line" v-if="navFlag == 1"></div>
                    </div>
                    <div :class="navFlag == 2 ? 'active' : ''" @click="navFlag = 2">健康科普
                        <div class="line" v-if="navFlag == 2"></div>
                    </div>
                    <div class="moreBtn" @click="toPage('/contentList')">更多
                        <van-icon name="arrow" />
                    </div>
                </div>

                <template v-if="navFlag == 1">
                    <template v-if="videoList.length != 0">
                        <div class="video" v-for="(item, index) in videoList" :key="index" @click="toDetail(2, item)">
                            <img :src="item.topicPic">
                            <div>
                                <div>{{ item.topicTitle }}</div>
                                <div>{{ item.categoryName }}</div>
                                <div>
                                    <img src="../../assets/index/userTip.png" alt="">
                                    {{ item.doctorName }}
                                </div>
                            </div>
                            <img src="../../assets/index/tip.png" class="conTipimg" alt="">
                        </div>
                    </template>
                    <div class="empty" v-else>
                        <img src="../../assets/tip_content.png">
                    </div>
                </template>

                <template v-if="navFlag == 2">
                    <template v-if="topicList.length != 0">
                        <div class="video" v-for="(item, index) in topicList" :key="index" @click="toDetail(3, item)">
                            <img :src="item.topicPic">
                            <div>
                                <div>{{ item.topicTitle }}</div>
                                <div>{{ item.categoryName }}</div>
                                <div>
                                    <img src="../../assets/index/userTip.png" alt="">
                                    {{ item.doctorName }}
                                </div>
                            </div>
                            <img src="../../assets/index/tip.png" class="conTipimg" alt="">
                        </div>
                    </template>
                    <div class="empty" v-else>
                        <img src="../../assets/tip_content.png">
                    </div>
                </template>
            </div>

            <!-- 家庭医生 -->
            <div class="vipCon" v-if="user.userType == 0">
                <div class="videoTitle active">
                    家庭医生服务套餐
                </div>
                <img src="../../assets/index/vip1.png" @click="toPage('/familyIndex')">
            </div>



        </van-pull-refresh>

        <div class="appNavBox">
            <div>
                <img src="../../assets/navIcon/home2.png" alt="">
                <span>首页</span>
            </div>
            <div @click="toPage('/geren')">
                <img src="../../assets/navIcon/geren1.png" alt="">
                <span>我的</span>
            </div>
        </div>
    </div>
</template>

<script>
import { getMain, listDoctorMain } from '../../network/index'
import { listHelper } from '../../network/doctor'
import { imgUrl } from '../../network/request'
export default {
    name: 'HomeR',
    data() {
        return {
            myDoctorName: localStorage.myDoctorName,
            isLoading: false,
            imgUrl,
            user: JSON.parse(localStorage.user),
            navFlag: 1,
            videoList: [],
            topicList: [],
            doctorList: [],
            notice: '',//首页公告

            myDoctor: '',//我的医生信息

            patientNum: 0,//患者数量

            yiZhu: '',//医助名称

            helperList: [],
            messageList: [],//聊天列表

        }
    },
    mounted() {


    },
    methods: {

        toDetail(flag, obj) {
            if (flag == 1) {
                // 跳转到医生详情
                console.log(obj);
                if (obj == '') {
                    this.$toast('您暂未绑定医生')
                    return
                }
                this.$router.push({
                    path: "/doctorDetail",
                    query: {
                        doctor: obj
                    },
                });
            } else if (flag == 4) {
                // 医生列表
                this.$router.push({
                    path: "/doctorList",
                    query: {
                        content: obj
                    },
                });
            } else {
                //  视频 论坛详情
                this.$router.push({
                    path: "/topicDetail",
                    query: {
                        flag,
                        content: obj
                    },
                });
                console.log(obj);
            }


        },

        getData() {

            this.user = JSON.parse(localStorage.user)

            getMain({
                userType: localStorage.userType,
                userId: localStorage.userId,
                // userId:27
            }).then(res => {
                if (res.flag) {
                    this.isLoading = false
                    console.log(res);
                    this.notice = res.data.notice
                    this.topicList = []
                    this.videoList = []

                    if (localStorage.userType == 1) {
                        this.patientNum = res.data.userNum
                        if (res.data.yizhu != null) {
                            this.yiZhu = res.data.yizhu
                        }
                    }

                    if (res.data.doctors) {
                        res.data.doctors.forEach(ele => {
                            if (ele.inuserId == localStorage.myDoctorId) {
                                this.myDoctor = ele
                                this.messageList.push({
                                    name: this.user.doctorName,
                                    id: ele.inuserId,
                                    userImg: ele.doctorPic,
                                    msgHistory: [],
                                    userType: 1
                                })
                                console.log(this.messageList);

                            }
                        })
                    }

                    this.getHelperList()




                    console.log(this.myDoctor);

                    res.data.topicList = res.data.topicList.sort((a, b) => {
                        return b.orderNum - a.orderNum
                    })


                    this.doctorList = res.data.doctors
                    res.data.topicList.forEach(item => {
                        if (item.topicType == 0) {
                            if (item.zhiding == 1) {
                                this.topicList.unshift(item)
                            } else {
                                this.topicList.push(item)
                            }
                        } else if (item.topicType == 1) {
                            if (item.zhiding == 1) {
                                this.videoList.unshift(item)
                            } else {
                                this.videoList.push(item)
                            }
                        }
                    })
                }
            })

        },
        toPage(url) {
            if (url == '/contentList') {
                this.$router.push({
                    path: url,
                    query: {
                        flag: this.navFlag == 1 ? 2 : 3,
                    },
                });
            } else {
                this.$router.push(url)

            }
        },


        getHelperList() {
            listHelper().then(res => {
                if (res.flag) {
                    this.helperList = res.data

                    res.data.forEach(ele => {
                        if (ele.userId == localStorage.myHelperId) {

                            this.messageList.push({
                                name: ele.userName,
                                id: ele.userId,
                                userImg: ele.userImg,
                                msgHistory: [],
                                userType: 2
                            })
                            if (!localStorage.messageList) {
                                localStorage.messageList = JSON.stringify(this.messageList)
                            }

                        }
                    })


                }
            })
        },


        resHandle() {
            this.isLoading = true
            this.messageList = []
            this.getData()

        },
    },
    created() {
        this.messageList = []

        this.getData()

        console.log(this.user);
        this.user.userType = 1
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}








</script>

<style lang='less' scoped>
.pageCon {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    padding: 30px 30px 120px;
    overflow-y: scroll;
}

.topCon {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topCon>div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 400;
    font-size: 20px;
    color: #858B90;
}

.topCon>div:first-child>span:last-child {
    margin-top: 16px;
    font-weight: bold;
    font-size: 32px;
    color: #333333;
}

.topCon>div:last-child {
    display: flex;
}

.topCon>div:last-child>div {
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 400;
    font-size: 24px;
    color: #666666;
}

.topCon>div:last-child>div>img {
    margin-bottom: 8px;
    width: 38px;
    height: 38px;
}

.recordBox {
    position: relative;
    width: 690px;
}

.recordBox>img {
    width: 100%;
}

.myDoctor {
    position: absolute;
    bottom: 116px;
    left: 45px;
    font-weight: bold;
    font-size: 52px;
    color: #FFFFFF;
}

.myDoctor>span:last-child {
    display: block;
    margin-top: 10px;
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    opacity: 0.8;
}



.doctorCon {
    width: 100%;
}

.doctorTitle {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: bold;
    font-size: 32px;
    color: #333333;
}

.doctorTitle>div {
    font-size: 26px;
    color: #858B90;
    font-weight: 400;
}

.doctorList {
    margin-top: 30px;
    white-space: nowrap;
    overflow-x: scroll;
    width: 720px;
}

.doctorList::-webkit-scrollbar {
    display: none !important;
}


.doctorInfo {
    margin-right: 36px;
    position: relative;
    box-sizing: border-box;
    padding: 36px 0 18px 24px;
    display: inline-block;
    width: 300px !important;
    height: 308px;
    background: linear-gradient(-49deg, #FFFFFF, #EAFCF9);
    /* background: aquamarine; */
    box-shadow: 0px 1px 10px 0px rgba(51, 51, 51, 0.15);
    border-radius: 20px;
}


.leftInfo {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.leftInfo>span:first-child {
    font-weight: 500;
    font-size: 28px;
    color: #333333;
}

.leftInfo>span:nth-child(2) {
    margin-top: 10px;
    font-weight: 500;
    font-size: 20px;
    color: #858B90;
}

.leftInfo>span:nth-child(3) {
    display: block;
    width: 60%;
    margin-top: 10px;
    font-weight: 500;
    font-size: 28px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leftInfo>img:nth-child(4) {
    margin-top: 4px;
    width: 28px;
    height: 8px;
    margin-bottom: 40px;
}


.hospitalImg {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 118px;
    height: 90px;
}

.doctorImg {
    position: absolute;
    width: 140px;
    height: 198px;
    right: 0px;
    bottom: 0px;
    background-color: azure;
    z-index: 1;
    border-radius: 20px !important;
}




.videoCon {
    margin-top: 50px;
    width: 690px;
}

.videoTitle {
    position: relative;
    display: flex;
    align-items: baseline;
    width: 100%;
    font-weight: 400;
    font-size: 28px;
    color: #666;
}

.videoTitle>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-right: 30px;
}

.moreBtn {
    margin-right: 0px !important;
    position: absolute !important;
    right: 0px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

}

.line {
    width: 50px;
    height: 4px;
    background: #3CBD70;
    border-radius: 2px;
}

.active {
    font-weight: bold !important;
    font-size: 32px !important;
    color: #333333 !important;
}


.video {
    position: relative;
    margin-top: 30px;
    display: flex;
    align-items: center;
    width: 690px;
}

.video>img,
.imgItem {
    margin-right: 14px;
    width: 46%;
    height: 186px;
    // background: #eee;
    border-radius: 8px;
}

.conTipimg {
    position: absolute !important;
    top: 8px;
    left: calc(46% - 84px);
    width: 84px !important;
    height: 36px !important;
}

.video>div {
    position: relative;
    flex: 1;
    height: 186px;
}

.video>div>div:first-child {
    width: 360px;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video>div>div:nth-child(2) {
    margin-top: 14px;
    font-weight: 400;
    font-size: 24px;
    color: #858B90;
}

.video>div>div:nth-child(3) {
    position: absolute;
    bottom: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    font-weight: 400;
    font-size: 20px;
    color: #858B90;
}


.video>div>div:nth-child(3)>img {
    margin-right: 10px;
    width: 24px;
    height: 24px;
}

.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.empty>img {
    margin-top: 100px;
    width: 374px;
    height: 314px;
}


.vipCon {
    margin-top: 50px;
    width: 100%;
}

.vipCon>img {
    /* position: relative;
  left: -15rpx; */
    width: 100%;
}


.messageBox {
    box-sizing: border-box;
    padding: 0 34px;
    display: flex;
    align-items: center;
    width: 690px;
    height: 60px;
    background: linear-gradient(90deg, #E0FBE9, #FFFFFF, #F4FDF8);
    border-radius: 18px;
}

.messageBox>img {
    width: 82px;
    height: 26px;
    background: #f2f2f2;
}

.messageBox>div:nth-child(2) {
    flex: 1;
    height: 100%;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #333333;
}

.van-notice-bar {
    height: 100%;
    background: transparent;
}

.messageBox>div:last-child {
    display: flex;
    align-items: center;
    position: relative;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #19AF6C;
}

.messageBox>div:last-child::before {
    margin-right: 24px;
    // position: absolute;
    // left: 0px;
    display: block;
    content: '';
    width: 2px;
    height: 18px;
    background: #CCCCCC;
    border-radius: 1px;
}

.navBox {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.navBox>div {
    box-sizing: border-box;
    padding: 44px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 330px;
    height: 280px;
    background: linear-gradient(111deg, #DBD21A, #EDC228);
    border-radius: 20px;
    font-family: Source Han Sans CN;
    color: #FFFFFF;
    font-weight: 400;
    background-size: 100% 100%;

}

.navBox>div>span:first-child {
    font-weight: blod;
    font-size: 36px;
}

.navBox>div>span:nth-child(2),
.navBox>div>span:nth-child(3) {
    margin-top: 14px;
    font-size: 24px;
    color: rgba(255, 255, 255, .8);
}

.navBox>div:first-child {
    background-image: url(../../assets/index/points.png);
}

.navBox>div:nth-child(2) {
    background-image: url(../../assets/index/family.png);
}


.topInfoBox {
    position: relative;
    padding-bottom: 30px;
    position: relative;
    width: 100%;
    // background: #f2f2f2;
    border-bottom: 2px solid #f2f2f2;
}

.topInfoBox>div:first-child {
    display: flex;
}

.topInfoBox>div:first-child>img {
    margin-right: 20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.topInfoBox>div:first-child>div {
    display: flex;
    flex-direction: column;
    font-size: 36px;
    color: #333;
}

.topInfoBox>div:first-child>div>span {
    font-weight: bold;

}

.doctInfoBox {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 36px;
    color: #333;
    font-weight: bold;

}

.doctInfoBox>div {
    flex: 1;
    margin-right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.doctInfoBox>div>span {
    margin-top: 16px;
    font-size: 24px;
    font-weight: 400;
}

.noticeBox {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #333;
}

.noticeBox>img {
    margin-bottom: 8px;
    width: 38px;
    height: 38px;
}
</style>